<template>
    <div class="mylogin">
        <!-- <div class="bg"></div> -->
        <div class="logo">
            <img src="@/assets/mhdlogo.png" alt="" />
        </div>
        <header @click="go">
            <van-icon name="arrow-left" />
        </header>
        <div class="box">
            <ul>
                <router-link tag="li" to="/login/islogin"><span>登录</span></router-link>
                <router-link tag="li" to="/login/isregister"><span>注册</span></router-link>
            </ul>
            <transition>
                <router-view></router-view>
            </transition>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {};
    },
    methods: {
        go() {
            this.$router.push({ path: "/" });
        },
    },
};
</script>

<style lang="scss" scoped>
.mylogin {
    .v-enter,
    .v-leave-to {
        transform: translateX(-50px);
        opacity: 0;
    }
    .v-enter-active {
        transition: all 0.3s;
    }
    .v-enter-to,
    .v-leave {
        opacity: 1;
        transform: translateX(0px);
    }
    .v-leave-to {
        transform: translateX(50px);
    }
    .v-leave-active {
        transition: all 0s;
    }

    // .bg {
    //     background-image: url("@/assets/login_bg.jpg");
    //     background-size: cover;
    //     background-repeat: no-repeat;
    //     //  <img src="@/assets/login_bg.jpg" alt="" />
    //     width: 100%;
    //     height: 100%;
    //     z-index: -99;
    //     position: absolute;
    //     &::before {
    //         content: "";
    //         position: absolute;
    //         width: 100%;
    //         height: 100%;
    //         backdrop-filter: blur(5px);
    //     }
    // }
    overflow: hidden;
    min-height: 41.6875rem;
    width: 100%;
    .logo {
        width: 156px;
        height: 118px;
        position: absolute;
        top: 11.9375rem;
        z-index: -1;
        left: 60%;
        transform: translateX(-50%);
        img {
            opacity: 0.8;
            width: 100%;
            height: 100%;
        }
    }
    header {
        width: 100%;
        height: 5.625rem;
        background-color: transparent;
        font-size: 1.5625rem;
        box-sizing: border-box;
        padding: 0.625rem;
        color: #8b8b8b;
    }
    .box {
        margin: 40px auto;
        width: 300px;
        height: 100px;
        ul {
            display: flex;
            justify-content: space-around;
            padding: 0 30px;
        }
        li {
            &.router-link-exact-active {
                color: rgb(251, 132, 132);
                span {
                    padding-bottom: 0.3125rem;
                    border-bottom: 3px solid pink;
                }
            }
            span {
                transition: all 0.1s;
            }
            transition: all 0.2s;
            width: 100px;
            text-align: center;
            height: 3.125rem;
            line-height: 3.125rem;
            color: #8b8b8b;

            font-size: 17px;
        }
    }
}
</style>
